<template>
  <div class="account-manager">
    <h1>账户管理</h1>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <el-card>
        <div class="user-info">
          <el-avatar :size="64" :src="avatarImg"></el-avatar>
          <div class="info-details">
            <h2>{{ userInfo.username }}</h2>
            <!-- <p>{{ userInfo.email }}</p> -->
          </div>
        </div>
      </el-card>
    </div>

    <!-- 账户设置表单 -->
    <div class="account-settings">
      <el-form :model="form" label-width="120px">
        <!-- <el-form-item label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item> -->

        <el-form-item label="修改密码">
          <el-input v-model="form.oldPassword" type="password" placeholder="原密码"></el-input>
          <el-input v-model="form.newPassword" type="password" placeholder="新密码" class="mt-2"></el-input>
          <el-input v-model="form.confirmPassword" type="password" placeholder="确认新密码" class="mt-2"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveChanges">保存修改</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- API密钥管理 -->
    <!-- <div class="api-keys">
        <h2>API密钥管理</h2>
        <el-table :data="apiKeys" style="width: 100%">
          <el-table-column prop="name" label="密钥名称"></el-table-column>
          <el-table-column prop="key" label="密钥" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" size="small" @click="deleteApiKey(scope.row)">删除</el-button>
            </template>
</el-table-column>
</el-table>
<el-button type="primary" @click="createNewApiKey" class="mt-3">创建新密钥</el-button>
</div> -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import avatarImg from '@/assets/OIP-C.jpg'

const userStore = useUserStore()

// 用户信息
const userInfo = reactive({
  username: userStore.username,
  // avatar: 'https://placeholder.com/64x64'
})

// 表单数据
const form = reactive({
  // username: userStore.username,
  // email: userInfo.email,
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// API密钥数据
const apiKeys = ref([
  {
    name: '默认密钥',
    key: 'sk-xxxxxxxxxxxxxxxxxxxxxxxx',
    createTime: '2024-01-01 12:00:00'
  }
])

// 保存修改
const saveChanges = async () => {
  try {
    // 验证新密码
    if (form.newPassword && form.newPassword !== form.confirmPassword) {
      ElMessage.error('两次输入的密码不一致')
      return
    }

    const response = await userStore.updatePassword({
      username: form.username,
      oldPassword: form.oldPassword,
      newPassword: form.newPassword
    })

    if (response.data.code === 200) {
      ElMessage.success('修改成功')
      // 更新本地显示的用户信息
      userInfo.username = form.username
      userInfo.email = form.email
      // 清空密码字段
      form.oldPassword = ''
      form.newPassword = ''
      form.confirmPassword = ''
    } else {
      ElMessage.error(response.data.message || '修改失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '网络错误，请稍后重试')
  }
}

// 创建新API密钥
const createNewApiKey = () => {
  // 这里添加创建密钥的逻辑
  apiKeys.value.push({
    name: '新密钥',
    key: 'sk-' + Math.random().toString(36).substr(2),
    createTime: new Date().toLocaleString()
  })
  ElMessage.success('新密钥已创建')
}

// 删除API密钥
const deleteApiKey = (row) => {
  const index = apiKeys.value.indexOf(row)
  apiKeys.value.splice(index, 1)
  ElMessage.success('密钥已删除')
}
</script>

<style scoped>
.account-manager {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.user-card {
  margin-bottom: 30px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.info-details h2 {
  margin: 0;
  font-size: 1.2em;
}

.info-details p {
  margin: 5px 0;
  color: #666;
}

.account-settings {
  margin-bottom: 30px;
}

.api-keys {
  margin-top: 30px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}
</style>